<!-- 原液参数 -->
<template>
  <el-dialog title="原液参数" width="900" :model-value="modelValue" @close="commEvent.onClose">
    <div class="config-import">
      <el-button type="primary">导入</el-button>
      <el-tooltip placement="top" content="只有无数据时才可支持导入">
        <el-icon size="20px" color="#e6a014"><WarningFilled /></el-icon>
      </el-tooltip>
    </div>
    <el-form ref="formRef" :model="forms" :rules="rules">
      <el-form-item prop="mockArr">
        <div v-for="(item, index) in forms.mockArr" :key="item.id" class="config-row">
          <el-row class="w-full">
            <div class="config-title">
              <div class="mr15">通道参数{{ index + 1 }}：</div>
              <el-button v-if="index === forms.mockArr.length - 1" type="primary" size="small" @click="commEvent.onAdd">
                新增
              </el-button>
              <el-button v-if="index === forms.mockArr.length - 1" type="primary" size="small" @click="commEvent.onCopy(item)">
                复制
              </el-button>
              <el-button v-if="forms.mockArr.length > 1" type="danger" plain size="small" @click="commEvent.onDelete(item)">
                删除
              </el-button>
            </div>
          </el-row>
          <el-row :gutter="20" class="w-full">
            <el-col :span="10" class="mt10">
              <div class="config-list">
                <div class="list-label">通道号：</div>
                <div class="list-value">
                  <el-select v-model="item.channel" placeholder="请选择" class="w-full">
                    <el-option
                      v-for="option in CHANNEL_OPTIONS"
                      :key="option.value"
                      :label="option.label"
                      :value="option.value"
                    />
                  </el-select>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row v-for="(n, i) in item.children" :key="n.id" :gutter="20" class="w-full" align="middle">
            <el-col :span="10" class="mt10">
              <div class="config-list">
                <div class="list-label">溶质名称：</div>
                <div class="list-value">
                  <el-input placeholder="请输入" class="w-full" />
                </div>
              </div>
            </el-col>
            <el-col :span="10" class="mt10">
              <div class="config-list">
                <div class="list-label">溶质浓度：</div>
                <div class="list-value">
                  <el-input placeholder="请输入" class="w-full" />
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <el-button v-if="item.children.length > 1" type="danger" plain size="small" @click="commEvent.childDelete(n)">
                删除
              </el-button>
              <el-button v-if="i === item.children.length - 1" type="primary" size="small" @click="commEvent.childCopy(item, n)">
                复制
              </el-button>
            </el-col>
          </el-row>
        </div>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="commEvent.onClose">取消</el-button>
      <el-button type="primary">确认</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { FormInstance, FormRules } from "element-plus"
import { ref } from "vue"
import { CHANNEL_OPTIONS } from "@/config"

defineProps({
  modelValue: { type: Boolean, default: false }
})
const emit = defineEmits(["update:modelValue", "refresh"])
// 参数
const formRef = ref<FormInstance>() // 表单实例
// 表单参数
const forms = ref({
  mockArr: [
    { id: "001", channel: "", children: [{ id: "001-1" }] },
    { id: "002", channel: "", children: [{ id: "002-1" }, { id: "002-2" }] }
  ]
})
// 表单校验
const rules: FormRules = {}
// 事件
const commEvent = {
  // 关闭弹窗
  onClose: () => {
    emit("update:modelValue", false)
  },
  // 新增
  onAdd: () => {
    const _id = Date.now().toFixed(0)
    const _obj = { id: _id, channel: "", children: [{ id: _id + "-1" }] }
    forms.value.mockArr = [...forms.value.mockArr, _obj]
  },
  // 编辑
  onCopy: (item: any) => {
    const _id = Date.now().toFixed(0)
    const _child = item.children.map((item: any, index: number) => ({
      ...item,
      id: `${_id}-${index + 1}`
    }))
    const _obj = { id: _id, channel: item.channel || "", children: _child }
    forms.value.mockArr = [...forms.value.mockArr, _obj]
  },
  // 删除
  onDelete: (item: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    forms.value.mockArr = copyData.filter(val => val.id !== item.id)
  },
  // 删除子元素
  childDelete: (item: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    copyData.forEach(val => {
      val.children = val.children.filter((el: any) => el.id !== item.id)
    })
    forms.value.mockArr = copyData
  },
  // 复制子元素
  childCopy: (item: any, n: any) => {
    const copyData: any[] = JSON.parse(JSON.stringify(forms.value.mockArr))
    copyData.forEach(val => {
      if (val.id === item.id) {
        const _obj = { ...n, id: Date.now().toFixed(0) }
        val.children = [...val.children, _obj]
      }
    })
    forms.value.mockArr = copyData
  }
}
</script>

<style lang="scss" scoped>
.w-full {
  width: 100%;
}
.config-import {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  margin-bottom: 20px;
}
.config-row {
  width: 100%;
  &:nth-child(n + 2) {
    margin-top: 20px;
  }
  .config-title {
    display: flex;
    align-items: center;
    width: 100%;
  }
  .config-list {
    display: flex;
    align-items: center;
    width: 100%;
    .list-label {
      flex-shrink: 0;
      width: 70px;
      font-size: 14px;
      text-align: right;
    }
    .list-value {
      flex: 1;
    }
  }
}
</style>
